<template>
  <div class="maintenance flex justify-center">
    <div class="text-white flex flex-col gap-16">
      <h1 class="text-[100px]">:(</h1>
      <h2>系统可能正在维护中，暂时无法访问</h2>
      <h2>与服务器失去了联系</h2>

      <div>
        <h3 class="mb-12 text-gray-300">
          你可以先
          <a-button :href="qrText" type="ghost" class="px-0">
            <span class="text-white">查看文档 »</span>
          </a-button>
        </h3>
        <a-qrcode :value="qrText" bg-color="white" />
      </div>

      <div @click="pageStatus = 'normal'" class="text-white cursor-pointer">« 继续使用</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { pageStatus } from './global/config/websocket';

const qrText = ref('https://www.yuque.com/u32997899/ax/vall8a4k6dukftg6');
</script>

<style lang="scss" scoped>
.maintenance {
  background: #3973aa;
  width: 100vw;
  height: 100vh;
  padding: 0 30vw;
}
</style>
